<script setup>
import { ref,onMounted } from 'vue';
import { queryAll,saveDept,updateById,getById,deleteById } from '@/api/dept';
import { ElMessage, ElMessageBox } from 'element-plus';

const deptFormRef = ref(null);
const dialogTitle = ref('新增部门');
const dialogFormVisible = ref(false);
const form = ref({name: ''});
//重置表单
function resetForm(){
  form.value.name = '';
}
const formRules = ref({
  name: [
    { required: true, message: '请输入部门名称', trigger: 'blur' },
    { min: 3, max: 20, message: '最少3个字符,最多20个字符', trigger: 'blur' }
  ]
});
//显示新增部门对话框
function showAddWin(){
  dialogFormVisible.value= true;
  resetForm();
}
//保存部门信息
async function save(){
  deptFormRef.value.validate(async(valid) => { 
  if (!valid) {
    return; 
  }
  let result;
  if(form.value.id){
    result = await updateById(form.value);
  }else{
    result = await saveDept(form.value);
  }
  if(result.code == 1){
    ElMessage.success('保存部门成功')
    dialogFormVisible.value = false;
    resetForm();
    search();
  }else{
    ElMessage.error('保存部门失败')
  }
  });
  
}
//查询部门列表
const search = async() =>{
  let res = await queryAll();
  tableData.value = res.data;

}
//钩子函数
onMounted(()=>{
  search()}
);
//表单数据
const tableData = ref([]);

//操作处理函数
const handleEdit =  async (row) => {
 const result = await getById(row.id);
 if(result.code==1){
  form.value = result.data;
  dialogFormVisible.value=true;
  dialogTitle.value="修改部门信息";
 }
};
 
const handleDelete = (row) => {
ElMessageBox.confirm('确认要删除部门？', '提示', {
  confirmButtonText: '确定',
  cancelButtonText:'取消',
  type:'warning',
}).then( async ()=>{
  const result = await deleteById(row.id); 
  if(result.code==1){
    search();
    ElMessage.success('删除成功');
  }
}
)
};

</script>

<template>

  <!-- 新增按钮 -->
 <!-- 新增按钮 -->
  <el-button type="primary" @click="showAddWin">新增部门</el-button> 
  <!-- 新增窗口/修改窗口 -->
  <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="500">
    <el-form :model="form" :rules="formRules" ref="deptFormRef">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 部门表格 -->
  <el-table :data="tableData" border style="width: 100%">
    <!-- 序号列 -->
    <el-table-column type="index" label="序号" width="80px" align="center" />
    <!-- 部门名称列 -->
    <el-table-column prop="name" label="部门名称" align="center"/>
    <!-- 最后修改时间列 -->
    <el-table-column prop="updateTime" label="最后修改时间" align="center" />
    <!-- 操作列 -->
    <el-table-column label="操作"  align="center">
      <template #default="{ row }">
        <el-button type="primary" size="small"
         @click="handleEdit(row)">修改</el-button>
        <el-button type="danger" size="small" 
        @click="handleDelete(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>


</template>

<style scoped>

</style>
